<template>
  <v-layout title="投放公司详情">
    <el-row type="flex" justify="center">
      <el-col :lg="14" :md="14" :sm="24" class="confirm">

        <v-form
          ref="form1"
          :form-title="formTitle"
          :form-data="formData"
          label-width="120px"
        />

        <record-table
          :table-title="chargeTitle"
          :table-data="chargeData"
          :default-operate="false"
          title="充值记录列表"
          :show-create="false"
          @addNew="addCharge"
          @edit="editCharge"
        />

        <record-table
          :table-title="tencentTitle"
          :table-data="tencentData"
          :default-operate="false"
          :show-create="false"
          title="公众号列表"
        />
        <!--新增/修改充值记录-->
        <el-dialog
          :visible.sync="dialogVisible"
          :title="dialogTitle"
          width="30%"
        >
          <v-form
            :form-title="chargeTitle"
            :form-data="dialogFormData"
          />
          <v-resetConfirmBtn
            @reset="resetDialog"
            @confirm="submitDialog"
          />
        </el-dialog>

        <!--<v-resetConfirmBtn-->
        <!--@reset="reset"-->
        <!--@confirm="confirm"-->
        <!--/>-->
      </el-col>
    </el-row>
  </v-layout>

</template>

<script>
  import {deepClone} from '@/utils'
  import recordTable from '../../components/record_table'

  export default {
    components: {recordTable},
    data() {
      return {
        corp_id: '',
        title: '',

        formTitle: [
          {
            cn: '公司',
            en: 'corp_name',
            disabled: true
          },
          {
            cn: '总充值',
            en: 'total_recharge',
            disabled: true
          },
          {
            cn: '总消耗',
            en: 'total_cost',
            disabled: true
          },
          {
            cn: '余额',
            en: 'total_balance',
            disabled: true
          },
          {
            cn: '预估收益',
            en: 'income',
            disabled: true
          },
          {
            cn: '实收比例',
            en: 'act_rate',
            disabled: true
          },
          {
            cn: '实际收益',
            en: 'act_income',
            disabled: true
          },
          {
            cn: '成本回收比例',
            en: 'recovery_rate',
            disabled: true
          },
          {
            cn: '7日日均回收',
            en: 'daily_income',
            disabled: true
          },
          {
            cn: '剩余回本周期',
            en: 'remaining_time',
            disabled: true
          },
        ],
        formData: {},
        chargeTitle: [
          {
            cn: '充值时间',
            en: 'date',
            type: 'time'
          },
          {
            cn: '付款公司',
            en: 'pay_corp',
          },
          {
            cn: '充值金额',
            en: 'money',
          },
        ],
        chargeData: [],
        tencentTitle: [
          {
            cn: 'id',
            en: 'id',
          },
          {
            cn: '公众号名称',
            en: 'mp_name',
          },
          {
            cn: '粉丝数',
            en: 'total_fans',
          },
          {
            cn: '投入成本',
            en: 'total_cost',
          },
          {
            cn: '预估收益',
            en: 'income',
          },
          {
            cn: '实际收益',
            en: 'act_income',
          },
          {
            cn: '成本回收比例',
            en: 'recovery_rate',
          },
          {
            cn: '近7日日均回收',
            en: 'daily_income',
          },
          {
            cn: '总体回本周期',
            en: 'payback_period',
          },
          {
            cn: '剩余回本周期',
            en: 'remaining_time',
          },
          {
            cn: '负责人',
            en: 'operater',
          },
          {
            cn: '系统',
            en: 'use_system',
          },
          {
            cn: '投放渠道',
            en: 'launch_channel',
          },
          {
            cn: '投放公司',
            en: 'launch_corp',
          },
        ],
        tencentData: [],

        // 充值
        dialogVisible: false,
        dialogTitle: '',
        dialogFormData: {},
        originData: {}
      }
    },
    activated() {
      this.corp_id = this.$route.query.id
      this.name = this.$route.query.name
      this.getClientDetail()
    },
    methods: {

      getClientDetail() {
        const data = {
          id: this.corp_id,
        }
        this.$get('action/TaoLaunchCorpInfo/qryOp', data)
          .then(res => {
            this.chargeData = res.data.arr_recharge || []
            this.tencentData = res.data.arr_mp_info.map((item, index) => {
              item.payback_period = item.payback_period ? item.payback_period.toFixed(2) : 0
              item.remaining_time = item.remaining_time ? item.remaining_time.toFixed(2) : 0
              item.recovery_rate = item.recovery_rate ? item.recovery_rate.toFixed(2) : 0
              return item
            }) || []
            this.formData = res.data.data || {}
          })
      },

      // 添加充值记录
      addCharge(val) {
        this.dialogTitle = '添加充值记录'
        this.dialogVisible = true
      },
      submitDialog() {
        const data = {
          ...this.dialogFormData,
          corp_id: this.corp_id,
        }
        this.$post('action/TaoLaunchCorpInfo/save', data)
          .then(res => {
            this.dialogFormData = {}
            this.dialogVisible = false
            this.getClientDetail()
          })
      },
      // 修改充值记录
      editCharge(val) {
        this.dialogTitle = '修改充值记录';
        this.originData = val.row || {}
        this.dialogVisible = true
      },
      // 删除充值记录
      delCharge(val) {
        const data = {
          id: val.row.id,
          corp_id: this.corp_id
        }
        this.$post('action/charge/del', data)
          .then(res => {
            console.log(res);
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.dialogVisible = false
            this.getClientDetail()
          })
      },
      resetDialog() {
        this.dialogFormData = this.$deepClone(this.originData)
      },

      back() {
        this.$router.go(-1)
      },
    }
  }
</script>

